<template>
  <lay-container fluid="true" class="base-info">
    <div class="tab-content">
      <lay-form :model="myUser" ref="formRef" label-width="60" size="sm">
        <lay-form-item label="昵称" prop="nickName" required>
          <lay-input v-model="myUser.nickName" allow-clear></lay-input>
        </lay-form-item>
        <lay-form-item label="联系电话" prop="phone" required>
          <lay-input v-model="myUser.phone" type="phone" allow-clear ></lay-input>
        </lay-form-item>
        <lay-form-item label="微信">
          <lay-input :modelValue="myUser.wxUserName" :disabled="true">
            <template #append>
              <span v-if="myUser.wxUserName === '' || myUser.wxUserName == null " v-on:click="toBindWx">绑定</span>
              <span v-else v-on:click="toUnbindWxDom">解绑</span>
            </template>
          </lay-input>
        </lay-form-item>
        <lay-form-item label="邮箱" prop="email">
          <lay-input v-model="myUser.email" type="email" allow-clear ></lay-input>
        </lay-form-item>
        <lay-form-item label="默认角色" prop="defaultRoleCode" required>
          <lay-select v-model="myUser.defaultRoleCode" :options="myRoleList" style="width: 100%">
          </lay-select>
        </lay-form-item>
        <lay-form-item label="性别" prop="sex" required>
          <lay-select v-model="myUser.sex" style="width: 100%" placeholder="请选择性别" >
            <lay-select-option value="man" label="男" ></lay-select-option>
            <lay-select-option value="woman" label="女" ></lay-select-option>
            <lay-select-option value="unknown" label="保密" ></lay-select-option>
          </lay-select>
        </lay-form-item>
        <lay-form-item label="签名" prop="signature">
          <lay-input v-model="myUser.signature" allow-clear ></lay-input>
        </lay-form-item>
        <lay-form-item label="个人简介" prop="note">
          <lay-textarea placeholder="还没有个人简介哦~" v-model="myUser.note" allow-clear ></lay-textarea>
        </lay-form-item>
        <lay-form-item style="text-align: center">
          <lay-button type="primary" @click="toEditMyUser">提交</lay-button>
          <lay-button @click="recover">恢复</lay-button>
        </lay-form-item>
      </lay-form>
    </div>


    <!-- 外部组件 -->
    <qrcode ref="qrcodeRef" title="微信二维码" :qrcodeUrl="params_qrcodeUrl" @closeParentTimer="clearTimer"></qrcode>

  </lay-container>
</template>
<script setup lang="ts">
import {onMounted, ref, toRef} from 'vue'
import {bindWx, editMe} from "@/api/module/myUser";
import {MyUserInfo} from "@/library/myTs";
import {atoRetainB} from "@/library/objectUtil";
import {useUserStore} from "@/store/user";
import {useSimulateStore} from "@/store/simulate";
import {useBootStore} from "@/store/boot";
import qrcode from './qrcode.vue'
import {unbindWx,wxStatus} from "@/api/module/myUser";
import {layer} from "@layui/layui-vue";

const bootStore = useBootStore();
const userStore = useUserStore();
const simulateStore = useSimulateStore();
const emit = defineEmits(['refreshParent'])
const props = defineProps<{
  myUser:MyUserInfo,
  myRoleList:Array<{label: string,value:string}>
}>();

const formRef = ref()

// 修改信息
const myUserEditBo = {
  id: 0,
  email: '',
  phone: '',
  sex: '',
  nickName: '',
  signature: '',
  profilePhoto: '',
  birthday: '',
  defaultRoleCode: '',
  note: '',
};
const toEditMyUser = function () {
  atoRetainB(props.myUser,myUserEditBo)

  editMe(myUserEditBo).then(res => {
    if (res.code == 200) {
      recover()
    }
  })
}

let timer:any = null;
// 查询微信绑定状态
const getWxStatus = function () {
  wxStatus().then(res=>{
    if(res.code == 200){
      if(res.data){
        clearInterval(timer)
        timer = null
        qrcodeRef.value.changeVisible();
        recover()
      }
    }else{
      clearInterval(timer)
      timer = null
    }
  })
};

const qrcodeRef = ref()
const params_qrcodeUrl = ref<string>()
const toBindWx = function (){
  bindWx().then(res => {
    if (res.code == 200) {
      qrcodeRef.value.changeVisible();
      params_qrcodeUrl.value = res.data;

      // 开启定时任务
      timer = setInterval(() => {
        getWxStatus()
      }, 2000);
    }
  })
}


// 解绑微信
const toUnbindWxDom = function() {
  layer.confirm("确认解绑微信？",{
    btn: [
      {
        text:'确认',
        callback: (index:string) => {
            unbindWx().then(res => {
              if (res.code == 200) {
                recover()
              }
              layer.close(index);
            })
        }
      },
      {text:'取消', callback: (index:string) => {
          layer.close(index); }
      }
    ]
  })
}

const recover = () => {
  emit('refreshParent')
  if (bootStore.simulate) {
    simulateStore.loadUserInfo();
  }else {
    userStore.loadUserInfo();
  }
}

const clearTimer = function () {
  clearInterval(timer)
};

</script>

<style scoped>
.base-info{
  height: calc(100vh - 205px);
}
.tab-content {
  height: 368px;
  max-width: 500px;
  padding: 0 20px;
  background-color: #fff;
}

:deep(.layui-input-append){
  cursor: pointer;
}
.account-item {
  display: flex;
  width: 99%;
  height: 41px;
  line-height: 43px;
  margin-right: 10px;
  padding: 12px 0;
  border-bottom: #ccc solid 1px;
}
.account-item:last-child {
  border-bottom: none;
}
.account-desc {
  flex: 1;
  color: #0006;
  line-height: 24px;
  display: inline-block;
}
.account-option {
  width: 45px;
  display: inline-block;
  color: var(--global-primary-color);
}
</style>